{% extends "base.html" %}

{% block title %}价格分布 - 惠农平台{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-chart-line me-2"></i>农产品不同时期价格分布</h3>
            </div>
            <div class="card-body">
                <!-- 筛选条件 -->
                <div class="row mb-4">
                    <div class="col-md-4">
                        <label for="productSelect" class="form-label">选择产品</label>
                        <select class="form-select" id="productSelect">
                            <option value="苹果">苹果</option>
                            <option value="西红柿">西红柿</option>
                            <option value="大米">大米</option>
                            <option value="玉米">玉米</option>
                            <option value="土豆">土豆</option>
                            <option value="白菜">白菜</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="granularitySelect" class="form-label">时间粒度</label>
                        <select class="form-select" id="granularitySelect">
                            <option value="day">按天</option>
                            <option value="week">按周</option>
                            <option value="month" selected>按月</option>
                            <option value="quarter">按季度</option>
                            <option value="year">按年</option>
                        </select>
                    </div>
                    <div class="col-md-4 d-flex align-items-end">
                        <button type="button" class="btn btn-primary" onclick="initPriceDistribution()">
                            <i class="fas fa-refresh me-1"></i>刷新图表
                        </button>
                    </div>
                </div>

                <!-- 图表容器 -->
                <div class="chart-container">
                    <div id="priceDistributionChart" style="width: 100%; height: 500px;"></div>
                </div>

                <!-- 说明信息 -->
                <div class="mt-4">
                    <div class="alert alert-info">
                        <h5><i class="fas fa-info-circle me-2"></i>图表说明</h5>
                        <ul class="mb-0">
                            <li>本图表展示了选定农产品在不同时期的价格变化趋势</li>
                            <li>可以通过选择不同的产品和时间粒度来查看不同的数据视图</li>
                            <li>图表支持缩放、平移等交互操作</li>
                            <li>鼠标悬停可查看详细的价格信息</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 